<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="50%"
      v-if="dialogVisible"
    >
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6"
            >【题型】
            <span v-if="questionsTags.questionType == 1">单选</span>
            <span v-else>多选 </span>
          </el-col>
          <el-col :span="6"
            >【编号】
            <span>{{ questionsTags.id }}</span>
          </el-col>
          <el-col :span="6"
            >【难度】
            <span v-if="questionsTags.difficulty == 1">简单</span>
            <span v-else-if="questionsTags.difficulty == 2">一般</span>
            <span v-else="questionsTags.difficulty == 3">困难</span>
          </el-col>
          <el-col :span="6"
            >【标签】
            <span>{{ questionsTags.tags }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row2">
          <el-col :span="6"
            >【学科】
            <span> {{ questionsTags.subjectName }}</span>
          </el-col>
          <el-col :span="6"
            >【目录】
            <span> {{ questionsTags.catalogID }}</span>
          </el-col>
          <el-col :span="6"
            >【方向】
            <span> {{ questionsTags.direction }}</span>
          </el-col>
        </el-row>
      </el-form>
      <hr />
      <div>【题干】:</div>
      <div style="color:blue" v-html="questionsTags.question"></div>
      <div v-if="questionsTags.questionType == 1">
        单选题 选项：（以下选中的选项为正确答案）
        <el-row class="el-rowQuestions">
          <el-radio-group v-model="radio">
            <el-radio
              :label="optionques.id"
              v-for="(optionques, index) in questionsTags.options"
              >{{ optionques.title }}</el-radio
            >
          </el-radio-group>
        </el-row>
      </div>
      <div v-else>
        多选题 选项：（以下选中的选项为正确答案）
        <el-row class="el-rowQuestions">
          <el-radio-group v-model="radio">
            <el-checkbox
              :label="optionques.id"
              v-for="(optionques, index) in questionsTags.options"
              >{{ optionques.title }}</el-checkbox
            >
          </el-radio-group>
        </el-row>
      </div>
      <div style="margin-top: 15px;">{{ questionsTags.option }}</div>
      <hr />
      <div>
        【参考答案】:
        <el-button size="small" type="danger" @click="videoURL"
          >视频答案预览
        </el-button>
        <video
          :src="videoURLShow"
          v-show="videoShow"
          height="400px"
          width="600px"
          controls="controls"
        ></video>
      </div>
      <hr />
      <div style="margin-top: 15px;">
        【答案解析】:
        <span v-html="questionsTags.answer"></span>
      </div>
      <hr />
      <div style="margin-top: 15px;">
        【题目备注】: {{ questionsTags.remarks }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "QuestionsPreview",
  components: {},
  props: {
    questionsTags: {
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      videoURLShow: "",
      videoShow: false,
      radio: 3
    };
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    questionslist() {
      console.log(this.questionsTags);
    },
    videoURL() {
      this.videoURLShow = this.questionsTags.videoURL;
      this.videoShow = true;
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
.el-row2 {
  margin-top: 15px;
}
.el-rowQuestions {
  margin-top: 20px;
}
.dialog-footer {
  text-align: end;
}
</style>
